<template>
	<view>
		<view>
			<!-- #ifdef H5 -->
			<uni-drawer ref="showLeft" mode="left" :mask-click="true">
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<uni-drawer ref="showLeft" mode="left" :mask-click="true" width="260">
					<!-- #endif -->
					<scroll-view style="height: 100%;" scroll-y="true">
						<view style="display: flex;flex-direction: column;">
							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">工单编号
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.id}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">维修类别
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.type}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">维修地址
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.address}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">维修原因
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.reason}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">提交时间
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.starttime}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view v-if="orderData.wname!='不可用'">
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">维修人
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.wname}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view v-if="orderData.wphone!='0'">
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:45%; text-align: left;">维修人联系方式
									</view>
									<view style="font-size:medium; color:#000000; width:50%; text-align: right;">
										{{orderData.wphone}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view v-if="orderData.consumable!=null && orderData.consumable!=''">
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:45%; text-align: left;">维修耗材
									</view>
									<view style="font-size:medium; color:#000000; width:50%; text-align: right;">
										{{orderData.consumable}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">当前状态
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.status}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view v-if="orderData.workerreason!=null && orderData.workerreason!=''">
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">维修人员退单原因
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.workerreason}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view v-if="orderData.adminreason!=null && orderData.adminreason!=''">
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">
										管理员拒绝退单原因</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.adminreason}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<view style="font-size:medium; color:#888888; width:35%; text-align: left;">更新时间
									</view>
									<view style="font-size:medium; color:#000000; width:60%; text-align: right;">
										{{orderData.updatetime}}
										<view style="width: 5%;"></view>
									</view>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>

							<view>
								<view style="height: 20rpx;"></view>
								<view style="display: flex;flex-direction: row;">
									<button size="mini"
										:disabled="orderData.imgsfileids1==null||orderData.imgsfileids1=='[]'"
										type="primary" plain="true"
										@click="lookImg(orderData.imgsfileids1)">查看申报图片</button>
									<button size="mini"
										:disabled="orderData.imgsfileids2==null||orderData.imgsfileids2=='[]'"
										type="primary" plain="true"
										@click="lookImg(orderData.imgsfileids2)">查看维修图片</button>
									<button size="mini" type="primary" plain="true"
										@click="confirmOrder(orderData.id)">确认完成</button>
								</view>
								<view style="height: 20rpx;"></view>
								<view style="background: #E0E3DA;width: 100%;height: 5rpx;"></view>
							</view>
						</view>
					</scroll-view>
				</uni-drawer>
		</view>
		<view>
			<modal v-if="showPop" title="工单评价" confirm-text="确定" cancel-text="取消" @cancel="cancelPop"
				@confirm="confirmPop">
				<input type='text' placeholder="请输入维修评价" v-model="comment" />
				<view style="height: 40rpx;"></view>
				<view style="display: flex;flex-direction: row;">
					维修速度：
					<uni-rate allow-half v-model="score1" :margin="15" />
				</view>
				<view style="height: 20rpx;"></view>
				<view style="display: flex;flex-direction: row;">
					维修质量：
					<uni-rate allow-half v-model="score2" :margin="15" />
				</view>
				<view style="height: 20rpx;"></view>
				<view style="display: flex;flex-direction: row;">
					维修态度：
					<uni-rate allow-half v-model="score3" :margin="15" />
				</view>
			</modal>
		</view>
		<view>
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="120">提交时间</uni-th>
					<uni-th width="90">维修类别</uni-th>
					<uni-th width="150">维修原因</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="item in tableData" @click.native="showDrawer(item)">
					<uni-td>{{item.starttime}}</uni-td>
					<uni-td>{{item.type}}</uni-td>
					<uni-td>{{item.reason}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import utils from "../../../../../utils.js"
	export default {
		data() {
			return {
				tableData: null,
				id: null,
				showPop: false, //弹窗
				comment: null,
				score1: 3,
				score2: 3,
				score3: 3,
				orderData: {
					address: null,
					adminreason: null,
					consumable: null,
					id: null,
					imgsfileids1: null,
					imgsfileids2: null,
					left: null,
					mark: null,
					reason: null,
					right: null,
					selectEndTime: null,
					selectStartTime: null,
					starttime: null,
					status: null,
					type: null,
					uid: null,
					uname: null,
					updatetime: null,
					uphone: null,
					wid: null,
					wname: null,
					workernote: null,
					workerreason: null,
					wphone: null
				}
			}
		},
		methods: {
			showDrawer(item) {
				console.log("点击了")
				console.log(item)
				this.orderData = item
				this.$refs.showLeft.open();
			},
			confirmOrder(id) {
				this.id = id
				this.showPop = true
			},
			//弹窗
			confirmPop() { //确认
				if (this.comment == null || this.comment == "") {
					uni.showToast({
						title: "请填写维修评价",
						icon: "none"
					})
				} else {
					console.log(this.score1)
					console.log(this.score2)
					console.log(this.score3)
					const that = this
					uni.showLoading({});
					var token = getApp().globalData.token
					uni.request({
						url: getApp().globalData.BASE_URL + '/user/completeOrder',
						data: {
							token: token,
							id: that.id,
							comment: that.comment,
							score1: that.score1,
							score2: that.score2,
							score3: that.score3,
						},
						header: {},
						success(response) {
							console.log(response)
							uni.hideLoading()
							if (response.data.status === 444) {
								uni.showToast({
									title: '您的登录信息已过期，请重新登录',
									duration: 2000,
									icon: "none",
									success() {
										setTimeout(function() {
											uni.reLaunch({
												url: "/pages/login/login",
											})
										}, 2000)
									}
								});
							} else if (response.data.status === 445) {
								uni.showToast({
									title: '您没有此操作权限',
									duration: 2000,
									icon: "none"
								});
							} else if (response.data === 1) {
								that.showPop = false
								that.id = null
								that.comment = null
								that.score1 = 3
								that.score2 = 3
								that.score3 = 3
								uni.showToast({
									title: '确认成功',
									duration: 2000,
									success() {
										setTimeout(function() {
											that.selectOrders()
											that.$refs.showLeft.close();
										}, 2000)
									}
								});
							} else {
								uni.showToast({
									title: '确认失败',
									duration: 2000,
									icon: "none"
								});
							}
						}
					})
				}
			},
			cancelPop() { //取消
				this.comment = null
				this.showPop = false
				this.score1 = 3
				this.score2 = 3
				this.score3 = 3
			},
			lookImg(imgs) {
				console.log(imgs)
				imgs = JSON.parse(imgs)
				for (var i = 0; i < imgs.length; i++) {
					imgs[i] = (getApp().globalData.BASE_URL + "/upload/" + imgs[i]).replace(/[\r\n]/g, "")
				}
				console.log(imgs)
				uni.previewImage({
					urls: imgs,
				});
			},
			selectOrders() {
				const that = this
				uni.showLoading({});
				var token = getApp().globalData.token
				uni.request({
					url: getApp().globalData.BASE_URL + '/user/selectOrders',
					data: {
						token: token,
						status: '工人已完成',
					},
					header: {},
					success(response) {
						console.log(response)
						uni.hideLoading()
						if (response.data.status === 444) {
							uni.showToast({
								title: '您的登录信息已过期，请重新登录',
								duration: 2000,
								icon: "none",
								success() {
									setTimeout(function() {
										uni.reLaunch({
											url: "/pages/login/login",
										})
									}, 2000)
								}
							});
						} else if (response.data.status === 445) {
							uni.showToast({
								title: '您没有此操作权限',
								duration: 2000,
								icon: "none"
							});
						} else {
							that.tableData = response.data.orders
							let newMaintainOrdersNum = response.data.orders.length
							utils.$emit("updateMaintainOrdersNum", newMaintainOrdersNum)
						}
					}
				})

			},
		},
		created() {

		},
		onShow() {},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.noLogin); //打印出上个页面传递的参数。
			var that = this
			if (option.noLogin == "true" || option.noLogin == true) {
				console.log("消息跳转而来")
				uni.showLoading({
					title: '正在加载...'
				});

				try {
					const user = uni.getStorageSync('user');
					console.log(user)
					console.log(user.phone)
					console.log(user.password)
					if (user == '') {
						console.log("用户信息没有缓存")
						uni.showToast({
							title: '您的登录信息已过期，请重新登录',
							duration: 2000,
							icon: "none",
							success() {
								setTimeout(function() {
									uni.reLaunch({
										url: "/pages/login/login",
									})
								}, 2000)
							}
						});
					} else {
						console.log("用户信息有缓存")

						uni.request({
							url: getApp().globalData.BASE_URL + '/user/login',
							data: {
								phone: user.phone,
								password: user.password
							},
							header: {

							},
							success(response) {
								console.log(response)
								if (response.data.status == 1) {
									getApp().globalData.loginState = response.data.status
									getApp().globalData.user = response.data.user
									getApp().globalData.token = response.data.token

									that.selectOrders()
								} else {
									uni.hideLoading()
									uni.showToast({
										title: '您的登录信息已过期，请重新登录',
										duration: 2000,
										icon: "none",
										success() {
											setTimeout(function() {
												uni.reLaunch({
													url: "/pages/login/login",
												})
											}, 2000)
										}
									});
								}
							}
						});
					}
				} catch (e) {
					console.log(e)
				}
			} else {
				console.log("小程序手动点击进入")
				that.selectOrders()
			}
		}
	}
</script>

<style>

</style>
